import React, { ReactElement, ReactNode } from 'react';
import { TypeLayoutPosition } from '../../types';
import { makeClassNameList } from '../../utils';

interface Props {
    contentRender: (props: { isLayoutShow: boolean, handleClose: Function }) => ReactNode
    clientY: number
    clientX: number
    disableBackground?: boolean
    animatedDirection?: 'TopBotom' | 'leftRight'
    onShow?: Function
    onHide?: Function
}

interface State {
    isLayoutShow: boolean
}

export default class CustomPopover extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
    };

    public delayTimer: any = null;
    public customPopoverRef: any = null;
    public customPopoverOverlayRef: any = null;

    public readonly state: Readonly<State> = {
        isLayoutShow: false,
    };

    componentDidMount() {

    };

    componentWillUnmount(): void {
        this.delayTimer && clearTimeout(this.delayTimer);
    }

    show() {
        const { onShow } = this.props;
        this.customPopoverOverlayRef.style.zIndex = 90000;
        this.customPopoverOverlayRef.style.width = '100%';
        this.customPopoverOverlayRef.style.height = '100%';
        this.setState({ isLayoutShow: true })
        onShow && onShow();
    }

    hide(){
        this.handleClosePopover();
    };

    handleClosePopover() {
        const { onHide } = this.props;
        requestAnimationFrame(() => {
            this.setState({ isLayoutShow: false })
        })
        onHide && onHide();
        this.delayTimer = setTimeout(() => {
            this.customPopoverOverlayRef.style.zIndex = -1;
            this.customPopoverOverlayRef.style.width = '0%';
            this.customPopoverOverlayRef.style.height = '0%';
        }, 200);
    };

    onClickPopoverContainer(e: any) {
        e.preventDefault();
        e.stopPropagation();
    }

    onMouseDown(e: any) {
        e.preventDefault();
        e.stopPropagation();
    };

    _handleClose() {
        this.handleClosePopover();
    };

    render() {
        const {
            contentRender,
            clientX,
            clientY,
            disableBackground = false,
            animatedDirection = 'TopBotom'
        } = this.props;
        const { isLayoutShow } = this.state;
        return (
            <div
                className='custom-popover-overlay'
                ref={(c) => this.customPopoverOverlayRef = c}
                onClick={this.handleClosePopover.bind(this)}
                onMouseDown={this.onMouseDown.bind(this)}
            >
                <div
                    ref={(c) => this.customPopoverRef = c}
                    style={{
                        top: clientY + 'px',
                        left: clientX + 'px',
                    }}
                    className={makeClassNameList([
                        'custom-popover',
                        isLayoutShow ? 'show' : null,
                        disableBackground ? 'custom-popover-no-background' : null,
                        animatedDirection == 'TopBotom' ? null : 'left-right-popover'
                    ])}
                    onClick={this.onClickPopoverContainer.bind(this)}
                >
                    {contentRender && contentRender({ isLayoutShow, handleClose: this._handleClose.bind(this) })}
                </div>
            </div>
        )
    }
}